<div class="rounded-lg" id="my-tab-graid">
  <div class="box bg-blue-500 span2 overflow-hidden">
    <a
      data-active="true"
      class="dark group relative overflow-clip rounded px-4 pb-6.5 pt-6.5 text-left shadow-lg shadow-black/0 [text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] data-[active=true]:shadow-black/30 max-lg:-mx-2 max-lg:w-auto lg:pt-3 hidden h-29 ease-[cubic-bezier(0,.15,0,1)] motion-safe:transition motion-safe:duration-300 lg:block"
      href="/customers/attentive"
      ><div
        class="group-data-[active=true]:linear-gradient(110deg,rgba(68,68,68,0.72)_0%,rgba(0,0,0,0.84)) absolute inset-0 after:absolute after:inset-0 after:h-full after:w-full after:bg-[linear-gradient(110deg,rgba(54,54,54,0.46)_0%,rgba(14,14,14,0.66)_39.9%,rgba(0,0,0,_0.95))]"
      >
        <img
          alt=""
          loading="lazy"
          decoding="async"
          data-nimg="fill"
          class="object-cover grayscale"
          style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent"
          sizes="(min-width: 1024px) 1024px, 100vw"
          srcset="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fattentive.f716ca40.jpg&w=640&q=75 640w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fattentive.f716ca40.jpg&w=750&q=75 750w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fattentive.f716ca40.jpg&w=828&q=75 828w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fattentive.f716ca40.jpg&w=1080&q=75 1080w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fattentive.f716ca40.jpg&w=1200&q=75 1200w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fattentive.f716ca40.jpg&w=1920&q=75 1920w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fattentive.f716ca40.jpg&w=2048&q=75 2048w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fattentive.f716ca40.jpg&w=3840&q=75 3840w"
          src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fattentive.f716ca40.jpg&w=3840&q=75"
        />
      </div><span
        class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 opacity-100 group-data-[active=true]:-translate-y-[200%] group-data-[active=true]:opacity-0 motion-safe:transition motion-safe:duration-[450ms]"
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="156"
          height="27"
          fill="currentColor"
          viewBox="0 0 631.5 108.2"
          class="h-2 w-auto"
          ><title>Attentive</title><path
            d="M625 31.9c0-2.4-1.7-4-4.5-4l-5.5.1.1 12.2h3V36h1.8l2.6 4.2h3.5l-3.1-4.7a4.08 4.08 0 0 0 2.1-3.6m-5.1 1.6H618v-3.1h2.2a1.55 1.55 0 0 1 1.7 1.3v.1a1.77 1.77 0 0 1-2 1.7M176.3 88.3c-5.1 0-8.6-4-8.6-9.9V51.5h21v-19h-20.95l-.2-21.8h-23.2l.2 72.6c0 14.7 9.8 24.7 24.2 24.7 7.6 0 14.8-1.1 20.5-3.7V85.8a27.3 27.3 0 0 1-12.95 2.5m55.4-57c-21.6 0-38.2 16.8-38.2 39.1 0 22.1 16.6 37.5 39.5 37.5 12.9 0 25-4.6 32.4-14.1l-17.8-8.1c-3.6 3.3-9.1 4.6-14 4.6-8 0-16-4.1-17.1-12.5h53.1a35.7 35.7 0 0 0 1.2-9.2c0-22.9-16.7-37.3-39.05-37.3Zm-15.2 31.8c.7-10 7.9-14.6 15.8-14.6 8.9 0 15.6 5 15.6 13.6v1Zm-94.2 25.2c-5.1 0-8.6-4-8.6-9.9V51.5h21v-19h-20.95l-.2-21.8h-23.2l.2 72.6c0 14.7 9.8 24.7 24.2 24.7 7.6 0 14.8-1.1 20.5-3.7V85.8a27.1 27.1 0 0 1-12.95 2.5m-81.5-57C20.9 31.3 0 44.4 0 70.8c0 22 14.8 37.4 33.5 37.4 10.7 0 18.8-4.3 24.1-11.9l.7 10.6h22.45V71.7c0-26.8-19.75-40.4-39.95-40.4m0 56.6c-10.1 0-17.4-7.5-17.4-18.1s7.2-18.1 17.4-18.1c9.4 0 17.2 8.2 17.2 18.1s-7.8 18.1-17.2 18.1m578.6-65.5c-7.3.1-12 4.8-11.9 11.8s4.9 11.6 12.2 11.5c7.1-.1 11.9-4.8 11.8-11.9s-4.9-11.5-12.1-11.4m.3 21.3c-5.7.1-9.6-3.7-9.6-9.5s3.7-9.7 9.4-9.8 9.5 3.7 9.6 9.6c0 5.7-3.8 9.6-9.35 9.7ZM506 32.6l-16.2 47-16.4-47h-25.2l30.2 74.2H501l30.2-74.2Zm60.1-1.3c-21.6 0-38.2 16.8-38.2 39.1 0 22.1 16.6 37.5 39.5 37.5 12.9 0 25-4.6 32.4-14.1L582 85.7c-3.6 3.3-9.1 4.6-14 4.6-8 0-16-4.1-17.1-12.5H604a35.7 35.7 0 0 0 1.2-9.2c0-22.9-16.7-37.3-39.1-37.3m16.2 31.8h-31.4c.7-10 7.9-14.6 15.8-14.6 8.9 0 15.6 5 15.6 13.6ZM430.3 0c-8.2 0-14.4 5.5-14.4 13.2s6.2 13.4 14.4 13.4 14.4-5.6 14.4-13.4S438.6 0 430.3 0M325 31.2A27.17 27.17 0 0 0 301.5 44l-.8-11.4h-22.4v74.2h23.2V67.9c.5-9.3 8-16.4 16.2-16.4 9.2 0 13.4 6.9 13.4 15.6v39.6h23.1V63.5c0-18.8-11.45-32.3-29.2-32.3m70.8 57.1c-5.1 0-8.6-4-8.6-9.9V51.5h21v-19h-21l-.2-21.8h-23.2l.2 72.6c0 14.7 9.8 24.7 24.2 24.7 7.6 0 14.8-1.1 20.5-3.7V85.8a27.1 27.1 0 0 1-12.9 2.5m22.8-55.7v74.2H442V32.6a21.18 21.18 0 0 1-23.4 0"
          ></path></svg
        ></span
      ><span
        aria-hidden="true"
        class="absolute right-4 top-4 opacity-0 group-data-[active=true]:opacity-100 motion-safe:transition-opacity motion-safe:delay-150 motion-safe:duration-[450ms] motion-safe:group-data-[active=false]:delay-0"
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="156"
          height="27"
          fill="currentColor"
          viewBox="0 0 631.5 108.2"
          class="h-2 w-auto"
          ><title>Attentive</title><path
            d="M625 31.9c0-2.4-1.7-4-4.5-4l-5.5.1.1 12.2h3V36h1.8l2.6 4.2h3.5l-3.1-4.7a4.08 4.08 0 0 0 2.1-3.6m-5.1 1.6H618v-3.1h2.2a1.55 1.55 0 0 1 1.7 1.3v.1a1.77 1.77 0 0 1-2 1.7M176.3 88.3c-5.1 0-8.6-4-8.6-9.9V51.5h21v-19h-20.95l-.2-21.8h-23.2l.2 72.6c0 14.7 9.8 24.7 24.2 24.7 7.6 0 14.8-1.1 20.5-3.7V85.8a27.3 27.3 0 0 1-12.95 2.5m55.4-57c-21.6 0-38.2 16.8-38.2 39.1 0 22.1 16.6 37.5 39.5 37.5 12.9 0 25-4.6 32.4-14.1l-17.8-8.1c-3.6 3.3-9.1 4.6-14 4.6-8 0-16-4.1-17.1-12.5h53.1a35.7 35.7 0 0 0 1.2-9.2c0-22.9-16.7-37.3-39.05-37.3Zm-15.2 31.8c.7-10 7.9-14.6 15.8-14.6 8.9 0 15.6 5 15.6 13.6v1Zm-94.2 25.2c-5.1 0-8.6-4-8.6-9.9V51.5h21v-19h-20.95l-.2-21.8h-23.2l.2 72.6c0 14.7 9.8 24.7 24.2 24.7 7.6 0 14.8-1.1 20.5-3.7V85.8a27.1 27.1 0 0 1-12.95 2.5m-81.5-57C20.9 31.3 0 44.4 0 70.8c0 22 14.8 37.4 33.5 37.4 10.7 0 18.8-4.3 24.1-11.9l.7 10.6h22.45V71.7c0-26.8-19.75-40.4-39.95-40.4m0 56.6c-10.1 0-17.4-7.5-17.4-18.1s7.2-18.1 17.4-18.1c9.4 0 17.2 8.2 17.2 18.1s-7.8 18.1-17.2 18.1m578.6-65.5c-7.3.1-12 4.8-11.9 11.8s4.9 11.6 12.2 11.5c7.1-.1 11.9-4.8 11.8-11.9s-4.9-11.5-12.1-11.4m.3 21.3c-5.7.1-9.6-3.7-9.6-9.5s3.7-9.7 9.4-9.8 9.5 3.7 9.6 9.6c0 5.7-3.8 9.6-9.35 9.7ZM506 32.6l-16.2 47-16.4-47h-25.2l30.2 74.2H501l30.2-74.2Zm60.1-1.3c-21.6 0-38.2 16.8-38.2 39.1 0 22.1 16.6 37.5 39.5 37.5 12.9 0 25-4.6 32.4-14.1L582 85.7c-3.6 3.3-9.1 4.6-14 4.6-8 0-16-4.1-17.1-12.5H604a35.7 35.7 0 0 0 1.2-9.2c0-22.9-16.7-37.3-39.1-37.3m16.2 31.8h-31.4c.7-10 7.9-14.6 15.8-14.6 8.9 0 15.6 5 15.6 13.6ZM430.3 0c-8.2 0-14.4 5.5-14.4 13.2s6.2 13.4 14.4 13.4 14.4-5.6 14.4-13.4S438.6 0 430.3 0M325 31.2A27.17 27.17 0 0 0 301.5 44l-.8-11.4h-22.4v74.2h23.2V67.9c.5-9.3 8-16.4 16.2-16.4 9.2 0 13.4 6.9 13.4 15.6v39.6h23.1V63.5c0-18.8-11.45-32.3-29.2-32.3m70.8 57.1c-5.1 0-8.6-4-8.6-9.9V51.5h21v-19h-21l-.2-21.8h-23.2l.2 72.6c0 14.7 9.8 24.7 24.2 24.7 7.6 0 14.8-1.1 20.5-3.7V85.8a27.1 27.1 0 0 1-12.9 2.5m22.8-55.7v74.2H442V32.6a21.18 21.18 0 0 1-23.4 0"
          ></path></svg
        ></span
      ><span
        class="relative whitespace-nowrap text-xs leading-6 text-gray-100/80 opacity-0 group-data-[active=true]:opacity-100 motion-safe:transition motion-safe:delay-150 motion-safe:duration-[450ms] motion-safe:group-data-[active=false]:delay-0"
        >Customer highlight</span
      ><blockquote
        cite="/customers/attentive"
        class="relative mt-2 space-y-3 md:mt-4"
      >
        <p
          class="translate-y-2 opacity-0 group-data-[active=true]:translate-y-0 group-data-[active=true]:opacity-100 motion-safe:transition motion-safe:delay-200 motion-safe:duration-[400ms] motion-safe:group-data-[active=false]:delay-0 lg:w-[48ch] lg+:w-[52ch]"
        >
          <span aria-hidden="true" class="-ml-[.5ch] select-none lg:mt-sm"
            >“</span
          >We have unlimited runway for growth and volume thanks to
          PlanetScale’s ability to scale horizontally<span
            aria-hidden="true"
            class="select-none">”</span
          >
        </p><footer
          class="translate-y-2 whitespace-nowrap text-xs opacity-0 group-data-[active=true]:translate-y-0 group-data-[active=true]:opacity-100 motion-safe:transition motion-safe:delay-300 motion-safe:duration-[400ms] motion-safe:group-data-[active=false]:delay-0"
        >
          <span class="font-bold">Todd Berman</span>
          <span class="text-secondary">|</span>
          <!-- -->CTO, Attentive
        </footer>
      </blockquote></a
    >
  </div>
  <div class="box bg-blue-500 span1 overflow-hidden" id="box2">
    <a
      data-active="true"
      class="dark group relative overflow-clip rounded px-4 pb-6.5 pt-6.5 text-left shadow-lg shadow-black/0 [text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] data-[active=true]:shadow-black/30 max-lg:-mx-2 max-lg:w-auto lg:pt-3 hidden h-29 ease-[cubic-bezier(0,.15,0,1)] motion-safe:transition motion-safe:duration-300 lg:block"
      href="/customers/attentive"
      ><div
        class="group-data-[active=true]:linear-gradient(110deg,rgba(68,68,68,0.72)_0%,rgba(0,0,0,0.84)) absolute inset-0 after:absolute after:inset-0 after:h-full after:w-full after:bg-[linear-gradient(110deg,rgba(54,54,54,0.46)_0%,rgba(14,14,14,0.66)_39.9%,rgba(0,0,0,_0.95))]"
      >
        <img
          alt=""
          loading="lazy"
          decoding="async"
          data-nimg="fill"
          class="object-cover grayscale"
          style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent"
          sizes="(min-width: 1024px) 1024px, 100vw"
          srcset="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fattentive.f716ca40.jpg&w=640&q=75 640w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fattentive.f716ca40.jpg&w=750&q=75 750w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fattentive.f716ca40.jpg&w=828&q=75 828w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fattentive.f716ca40.jpg&w=1080&q=75 1080w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fattentive.f716ca40.jpg&w=1200&q=75 1200w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fattentive.f716ca40.jpg&w=1920&q=75 1920w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fattentive.f716ca40.jpg&w=2048&q=75 2048w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fattentive.f716ca40.jpg&w=3840&q=75 3840w"
          src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fattentive.f716ca40.jpg&w=3840&q=75"
        />
      </div><span
        class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 opacity-100 group-data-[active=true]:-translate-y-[200%] group-data-[active=true]:opacity-0 motion-safe:transition motion-safe:duration-[450ms]"
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="156"
          height="27"
          fill="currentColor"
          viewBox="0 0 631.5 108.2"
          class="h-2 w-auto"
          ><title>Attentive</title><path
            d="M625 31.9c0-2.4-1.7-4-4.5-4l-5.5.1.1 12.2h3V36h1.8l2.6 4.2h3.5l-3.1-4.7a4.08 4.08 0 0 0 2.1-3.6m-5.1 1.6H618v-3.1h2.2a1.55 1.55 0 0 1 1.7 1.3v.1a1.77 1.77 0 0 1-2 1.7M176.3 88.3c-5.1 0-8.6-4-8.6-9.9V51.5h21v-19h-20.95l-.2-21.8h-23.2l.2 72.6c0 14.7 9.8 24.7 24.2 24.7 7.6 0 14.8-1.1 20.5-3.7V85.8a27.3 27.3 0 0 1-12.95 2.5m55.4-57c-21.6 0-38.2 16.8-38.2 39.1 0 22.1 16.6 37.5 39.5 37.5 12.9 0 25-4.6 32.4-14.1l-17.8-8.1c-3.6 3.3-9.1 4.6-14 4.6-8 0-16-4.1-17.1-12.5h53.1a35.7 35.7 0 0 0 1.2-9.2c0-22.9-16.7-37.3-39.05-37.3Zm-15.2 31.8c.7-10 7.9-14.6 15.8-14.6 8.9 0 15.6 5 15.6 13.6v1Zm-94.2 25.2c-5.1 0-8.6-4-8.6-9.9V51.5h21v-19h-20.95l-.2-21.8h-23.2l.2 72.6c0 14.7 9.8 24.7 24.2 24.7 7.6 0 14.8-1.1 20.5-3.7V85.8a27.1 27.1 0 0 1-12.95 2.5m-81.5-57C20.9 31.3 0 44.4 0 70.8c0 22 14.8 37.4 33.5 37.4 10.7 0 18.8-4.3 24.1-11.9l.7 10.6h22.45V71.7c0-26.8-19.75-40.4-39.95-40.4m0 56.6c-10.1 0-17.4-7.5-17.4-18.1s7.2-18.1 17.4-18.1c9.4 0 17.2 8.2 17.2 18.1s-7.8 18.1-17.2 18.1m578.6-65.5c-7.3.1-12 4.8-11.9 11.8s4.9 11.6 12.2 11.5c7.1-.1 11.9-4.8 11.8-11.9s-4.9-11.5-12.1-11.4m.3 21.3c-5.7.1-9.6-3.7-9.6-9.5s3.7-9.7 9.4-9.8 9.5 3.7 9.6 9.6c0 5.7-3.8 9.6-9.35 9.7ZM506 32.6l-16.2 47-16.4-47h-25.2l30.2 74.2H501l30.2-74.2Zm60.1-1.3c-21.6 0-38.2 16.8-38.2 39.1 0 22.1 16.6 37.5 39.5 37.5 12.9 0 25-4.6 32.4-14.1L582 85.7c-3.6 3.3-9.1 4.6-14 4.6-8 0-16-4.1-17.1-12.5H604a35.7 35.7 0 0 0 1.2-9.2c0-22.9-16.7-37.3-39.1-37.3m16.2 31.8h-31.4c.7-10 7.9-14.6 15.8-14.6 8.9 0 15.6 5 15.6 13.6ZM430.3 0c-8.2 0-14.4 5.5-14.4 13.2s6.2 13.4 14.4 13.4 14.4-5.6 14.4-13.4S438.6 0 430.3 0M325 31.2A27.17 27.17 0 0 0 301.5 44l-.8-11.4h-22.4v74.2h23.2V67.9c.5-9.3 8-16.4 16.2-16.4 9.2 0 13.4 6.9 13.4 15.6v39.6h23.1V63.5c0-18.8-11.45-32.3-29.2-32.3m70.8 57.1c-5.1 0-8.6-4-8.6-9.9V51.5h21v-19h-21l-.2-21.8h-23.2l.2 72.6c0 14.7 9.8 24.7 24.2 24.7 7.6 0 14.8-1.1 20.5-3.7V85.8a27.1 27.1 0 0 1-12.9 2.5m22.8-55.7v74.2H442V32.6a21.18 21.18 0 0 1-23.4 0"
          ></path></svg
        ></span
      ><span
        aria-hidden="true"
        class="absolute right-4 top-4 opacity-0 group-data-[active=true]:opacity-100 motion-safe:transition-opacity motion-safe:delay-150 motion-safe:duration-[450ms] motion-safe:group-data-[active=false]:delay-0"
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="156"
          height="27"
          fill="currentColor"
          viewBox="0 0 631.5 108.2"
          class="h-2 w-auto"
          ><title>Attentive</title><path
            d="M625 31.9c0-2.4-1.7-4-4.5-4l-5.5.1.1 12.2h3V36h1.8l2.6 4.2h3.5l-3.1-4.7a4.08 4.08 0 0 0 2.1-3.6m-5.1 1.6H618v-3.1h2.2a1.55 1.55 0 0 1 1.7 1.3v.1a1.77 1.77 0 0 1-2 1.7M176.3 88.3c-5.1 0-8.6-4-8.6-9.9V51.5h21v-19h-20.95l-.2-21.8h-23.2l.2 72.6c0 14.7 9.8 24.7 24.2 24.7 7.6 0 14.8-1.1 20.5-3.7V85.8a27.3 27.3 0 0 1-12.95 2.5m55.4-57c-21.6 0-38.2 16.8-38.2 39.1 0 22.1 16.6 37.5 39.5 37.5 12.9 0 25-4.6 32.4-14.1l-17.8-8.1c-3.6 3.3-9.1 4.6-14 4.6-8 0-16-4.1-17.1-12.5h53.1a35.7 35.7 0 0 0 1.2-9.2c0-22.9-16.7-37.3-39.05-37.3Zm-15.2 31.8c.7-10 7.9-14.6 15.8-14.6 8.9 0 15.6 5 15.6 13.6v1Zm-94.2 25.2c-5.1 0-8.6-4-8.6-9.9V51.5h21v-19h-20.95l-.2-21.8h-23.2l.2 72.6c0 14.7 9.8 24.7 24.2 24.7 7.6 0 14.8-1.1 20.5-3.7V85.8a27.1 27.1 0 0 1-12.95 2.5m-81.5-57C20.9 31.3 0 44.4 0 70.8c0 22 14.8 37.4 33.5 37.4 10.7 0 18.8-4.3 24.1-11.9l.7 10.6h22.45V71.7c0-26.8-19.75-40.4-39.95-40.4m0 56.6c-10.1 0-17.4-7.5-17.4-18.1s7.2-18.1 17.4-18.1c9.4 0 17.2 8.2 17.2 18.1s-7.8 18.1-17.2 18.1m578.6-65.5c-7.3.1-12 4.8-11.9 11.8s4.9 11.6 12.2 11.5c7.1-.1 11.9-4.8 11.8-11.9s-4.9-11.5-12.1-11.4m.3 21.3c-5.7.1-9.6-3.7-9.6-9.5s3.7-9.7 9.4-9.8 9.5 3.7 9.6 9.6c0 5.7-3.8 9.6-9.35 9.7ZM506 32.6l-16.2 47-16.4-47h-25.2l30.2 74.2H501l30.2-74.2Zm60.1-1.3c-21.6 0-38.2 16.8-38.2 39.1 0 22.1 16.6 37.5 39.5 37.5 12.9 0 25-4.6 32.4-14.1L582 85.7c-3.6 3.3-9.1 4.6-14 4.6-8 0-16-4.1-17.1-12.5H604a35.7 35.7 0 0 0 1.2-9.2c0-22.9-16.7-37.3-39.1-37.3m16.2 31.8h-31.4c.7-10 7.9-14.6 15.8-14.6 8.9 0 15.6 5 15.6 13.6ZM430.3 0c-8.2 0-14.4 5.5-14.4 13.2s6.2 13.4 14.4 13.4 14.4-5.6 14.4-13.4S438.6 0 430.3 0M325 31.2A27.17 27.17 0 0 0 301.5 44l-.8-11.4h-22.4v74.2h23.2V67.9c.5-9.3 8-16.4 16.2-16.4 9.2 0 13.4 6.9 13.4 15.6v39.6h23.1V63.5c0-18.8-11.45-32.3-29.2-32.3m70.8 57.1c-5.1 0-8.6-4-8.6-9.9V51.5h21v-19h-21l-.2-21.8h-23.2l.2 72.6c0 14.7 9.8 24.7 24.2 24.7 7.6 0 14.8-1.1 20.5-3.7V85.8a27.1 27.1 0 0 1-12.9 2.5m22.8-55.7v74.2H442V32.6a21.18 21.18 0 0 1-23.4 0"
          ></path></svg
        ></span
      ><span
        class="relative whitespace-nowrap text-xs leading-6 text-gray-100/80 opacity-0 group-data-[active=true]:opacity-100 motion-safe:transition motion-safe:delay-150 motion-safe:duration-[450ms] motion-safe:group-data-[active=false]:delay-0"
        >Customer highlight</span
      ><blockquote
        cite="/customers/attentive"
        class="relative mt-2 space-y-3 md:mt-4"
      >
        <p
          class="translate-y-2 opacity-0 group-data-[active=true]:translate-y-0 group-data-[active=true]:opacity-100 motion-safe:transition motion-safe:delay-200 motion-safe:duration-[400ms] motion-safe:group-data-[active=false]:delay-0 lg:w-[48ch] lg+:w-[52ch]"
        >
          <span aria-hidden="true" class="-ml-[.5ch] select-none lg:mt-sm"
            >“</span
          >We have unlimited runway for growth and volume thanks to
          PlanetScale’s ability to scale horizontally<span
            aria-hidden="true"
            class="select-none">”</span
          >
        </p><footer
          class="translate-y-2 whitespace-nowrap text-xs opacity-0 group-data-[active=true]:translate-y-0 group-data-[active=true]:opacity-100 motion-safe:transition motion-safe:delay-300 motion-safe:duration-[400ms] motion-safe:group-data-[active=false]:delay-0"
        >
          <span class="font-bold">Todd Berman</span>
          <span class="text-secondary">|</span>
          <!-- -->CTO, Attentive
        </footer>
      </blockquote></a
    >
  </div>
  <div class="box bg-blue-500 span1 overflow-hidden">
    <a
      data-active="true"
      class="dark group relative overflow-clip rounded px-4 pb-6.5 pt-6.5 text-left shadow-lg shadow-black/0 [text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] data-[active=true]:shadow-black/30 max-lg:-mx-2 max-lg:w-auto lg:pt-3 hidden h-29 ease-[cubic-bezier(0,.15,0,1)] motion-safe:transition motion-safe:duration-300 lg:block"
      href="/customers/attentive"
      ><div
        class="group-data-[active=true]:linear-gradient(110deg,rgba(68,68,68,0.72)_0%,rgba(0,0,0,0.84)) absolute inset-0 after:absolute after:inset-0 after:h-full after:w-full after:bg-[linear-gradient(110deg,rgba(54,54,54,0.46)_0%,rgba(14,14,14,0.66)_39.9%,rgba(0,0,0,_0.95))]"
      >
        <img
          alt=""
          loading="lazy"
          decoding="async"
          data-nimg="fill"
          class="object-cover grayscale"
          style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent"
          sizes="(min-width: 1024px) 1024px, 100vw"
          srcset="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fattentive.f716ca40.jpg&w=640&q=75 640w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fattentive.f716ca40.jpg&w=750&q=75 750w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fattentive.f716ca40.jpg&w=828&q=75 828w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fattentive.f716ca40.jpg&w=1080&q=75 1080w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fattentive.f716ca40.jpg&w=1200&q=75 1200w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fattentive.f716ca40.jpg&w=1920&q=75 1920w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fattentive.f716ca40.jpg&w=2048&q=75 2048w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fattentive.f716ca40.jpg&w=3840&q=75 3840w"
          src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fattentive.f716ca40.jpg&w=3840&q=75"
        />
      </div><span
        class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 opacity-100 group-data-[active=true]:-translate-y-[200%] group-data-[active=true]:opacity-0 motion-safe:transition motion-safe:duration-[450ms]"
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="156"
          height="27"
          fill="currentColor"
          viewBox="0 0 631.5 108.2"
          class="h-2 w-auto"
          ><title>Attentive</title><path
            d="M625 31.9c0-2.4-1.7-4-4.5-4l-5.5.1.1 12.2h3V36h1.8l2.6 4.2h3.5l-3.1-4.7a4.08 4.08 0 0 0 2.1-3.6m-5.1 1.6H618v-3.1h2.2a1.55 1.55 0 0 1 1.7 1.3v.1a1.77 1.77 0 0 1-2 1.7M176.3 88.3c-5.1 0-8.6-4-8.6-9.9V51.5h21v-19h-20.95l-.2-21.8h-23.2l.2 72.6c0 14.7 9.8 24.7 24.2 24.7 7.6 0 14.8-1.1 20.5-3.7V85.8a27.3 27.3 0 0 1-12.95 2.5m55.4-57c-21.6 0-38.2 16.8-38.2 39.1 0 22.1 16.6 37.5 39.5 37.5 12.9 0 25-4.6 32.4-14.1l-17.8-8.1c-3.6 3.3-9.1 4.6-14 4.6-8 0-16-4.1-17.1-12.5h53.1a35.7 35.7 0 0 0 1.2-9.2c0-22.9-16.7-37.3-39.05-37.3Zm-15.2 31.8c.7-10 7.9-14.6 15.8-14.6 8.9 0 15.6 5 15.6 13.6v1Zm-94.2 25.2c-5.1 0-8.6-4-8.6-9.9V51.5h21v-19h-20.95l-.2-21.8h-23.2l.2 72.6c0 14.7 9.8 24.7 24.2 24.7 7.6 0 14.8-1.1 20.5-3.7V85.8a27.1 27.1 0 0 1-12.95 2.5m-81.5-57C20.9 31.3 0 44.4 0 70.8c0 22 14.8 37.4 33.5 37.4 10.7 0 18.8-4.3 24.1-11.9l.7 10.6h22.45V71.7c0-26.8-19.75-40.4-39.95-40.4m0 56.6c-10.1 0-17.4-7.5-17.4-18.1s7.2-18.1 17.4-18.1c9.4 0 17.2 8.2 17.2 18.1s-7.8 18.1-17.2 18.1m578.6-65.5c-7.3.1-12 4.8-11.9 11.8s4.9 11.6 12.2 11.5c7.1-.1 11.9-4.8 11.8-11.9s-4.9-11.5-12.1-11.4m.3 21.3c-5.7.1-9.6-3.7-9.6-9.5s3.7-9.7 9.4-9.8 9.5 3.7 9.6 9.6c0 5.7-3.8 9.6-9.35 9.7ZM506 32.6l-16.2 47-16.4-47h-25.2l30.2 74.2H501l30.2-74.2Zm60.1-1.3c-21.6 0-38.2 16.8-38.2 39.1 0 22.1 16.6 37.5 39.5 37.5 12.9 0 25-4.6 32.4-14.1L582 85.7c-3.6 3.3-9.1 4.6-14 4.6-8 0-16-4.1-17.1-12.5H604a35.7 35.7 0 0 0 1.2-9.2c0-22.9-16.7-37.3-39.1-37.3m16.2 31.8h-31.4c.7-10 7.9-14.6 15.8-14.6 8.9 0 15.6 5 15.6 13.6ZM430.3 0c-8.2 0-14.4 5.5-14.4 13.2s6.2 13.4 14.4 13.4 14.4-5.6 14.4-13.4S438.6 0 430.3 0M325 31.2A27.17 27.17 0 0 0 301.5 44l-.8-11.4h-22.4v74.2h23.2V67.9c.5-9.3 8-16.4 16.2-16.4 9.2 0 13.4 6.9 13.4 15.6v39.6h23.1V63.5c0-18.8-11.45-32.3-29.2-32.3m70.8 57.1c-5.1 0-8.6-4-8.6-9.9V51.5h21v-19h-21l-.2-21.8h-23.2l.2 72.6c0 14.7 9.8 24.7 24.2 24.7 7.6 0 14.8-1.1 20.5-3.7V85.8a27.1 27.1 0 0 1-12.9 2.5m22.8-55.7v74.2H442V32.6a21.18 21.18 0 0 1-23.4 0"
          ></path></svg
        ></span
      ><span
        aria-hidden="true"
        class="absolute right-4 top-4 opacity-0 group-data-[active=true]:opacity-100 motion-safe:transition-opacity motion-safe:delay-150 motion-safe:duration-[450ms] motion-safe:group-data-[active=false]:delay-0"
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="156"
          height="27"
          fill="currentColor"
          viewBox="0 0 631.5 108.2"
          class="h-2 w-auto"
          ><title>Attentive</title><path
            d="M625 31.9c0-2.4-1.7-4-4.5-4l-5.5.1.1 12.2h3V36h1.8l2.6 4.2h3.5l-3.1-4.7a4.08 4.08 0 0 0 2.1-3.6m-5.1 1.6H618v-3.1h2.2a1.55 1.55 0 0 1 1.7 1.3v.1a1.77 1.77 0 0 1-2 1.7M176.3 88.3c-5.1 0-8.6-4-8.6-9.9V51.5h21v-19h-20.95l-.2-21.8h-23.2l.2 72.6c0 14.7 9.8 24.7 24.2 24.7 7.6 0 14.8-1.1 20.5-3.7V85.8a27.3 27.3 0 0 1-12.95 2.5m55.4-57c-21.6 0-38.2 16.8-38.2 39.1 0 22.1 16.6 37.5 39.5 37.5 12.9 0 25-4.6 32.4-14.1l-17.8-8.1c-3.6 3.3-9.1 4.6-14 4.6-8 0-16-4.1-17.1-12.5h53.1a35.7 35.7 0 0 0 1.2-9.2c0-22.9-16.7-37.3-39.05-37.3Zm-15.2 31.8c.7-10 7.9-14.6 15.8-14.6 8.9 0 15.6 5 15.6 13.6v1Zm-94.2 25.2c-5.1 0-8.6-4-8.6-9.9V51.5h21v-19h-20.95l-.2-21.8h-23.2l.2 72.6c0 14.7 9.8 24.7 24.2 24.7 7.6 0 14.8-1.1 20.5-3.7V85.8a27.1 27.1 0 0 1-12.95 2.5m-81.5-57C20.9 31.3 0 44.4 0 70.8c0 22 14.8 37.4 33.5 37.4 10.7 0 18.8-4.3 24.1-11.9l.7 10.6h22.45V71.7c0-26.8-19.75-40.4-39.95-40.4m0 56.6c-10.1 0-17.4-7.5-17.4-18.1s7.2-18.1 17.4-18.1c9.4 0 17.2 8.2 17.2 18.1s-7.8 18.1-17.2 18.1m578.6-65.5c-7.3.1-12 4.8-11.9 11.8s4.9 11.6 12.2 11.5c7.1-.1 11.9-4.8 11.8-11.9s-4.9-11.5-12.1-11.4m.3 21.3c-5.7.1-9.6-3.7-9.6-9.5s3.7-9.7 9.4-9.8 9.5 3.7 9.6 9.6c0 5.7-3.8 9.6-9.35 9.7ZM506 32.6l-16.2 47-16.4-47h-25.2l30.2 74.2H501l30.2-74.2Zm60.1-1.3c-21.6 0-38.2 16.8-38.2 39.1 0 22.1 16.6 37.5 39.5 37.5 12.9 0 25-4.6 32.4-14.1L582 85.7c-3.6 3.3-9.1 4.6-14 4.6-8 0-16-4.1-17.1-12.5H604a35.7 35.7 0 0 0 1.2-9.2c0-22.9-16.7-37.3-39.1-37.3m16.2 31.8h-31.4c.7-10 7.9-14.6 15.8-14.6 8.9 0 15.6 5 15.6 13.6ZM430.3 0c-8.2 0-14.4 5.5-14.4 13.2s6.2 13.4 14.4 13.4 14.4-5.6 14.4-13.4S438.6 0 430.3 0M325 31.2A27.17 27.17 0 0 0 301.5 44l-.8-11.4h-22.4v74.2h23.2V67.9c.5-9.3 8-16.4 16.2-16.4 9.2 0 13.4 6.9 13.4 15.6v39.6h23.1V63.5c0-18.8-11.45-32.3-29.2-32.3m70.8 57.1c-5.1 0-8.6-4-8.6-9.9V51.5h21v-19h-21l-.2-21.8h-23.2l.2 72.6c0 14.7 9.8 24.7 24.2 24.7 7.6 0 14.8-1.1 20.5-3.7V85.8a27.1 27.1 0 0 1-12.9 2.5m22.8-55.7v74.2H442V32.6a21.18 21.18 0 0 1-23.4 0"
          ></path></svg
        ></span
      ><span
        class="relative whitespace-nowrap text-xs leading-6 text-gray-100/80 opacity-0 group-data-[active=true]:opacity-100 motion-safe:transition motion-safe:delay-150 motion-safe:duration-[450ms] motion-safe:group-data-[active=false]:delay-0"
        >Customer highlight</span
      ><blockquote
        cite="/customers/attentive"
        class="relative mt-2 space-y-3 md:mt-4"
      >
        <p
          class="translate-y-2 opacity-0 group-data-[active=true]:translate-y-0 group-data-[active=true]:opacity-100 motion-safe:transition motion-safe:delay-200 motion-safe:duration-[400ms] motion-safe:group-data-[active=false]:delay-0 lg:w-[48ch] lg+:w-[52ch]"
        >
          <span aria-hidden="true" class="-ml-[.5ch] select-none lg:mt-sm"
            >“</span
          >We have unlimited runway for growth and volume thanks to
          PlanetScale’s ability to scale horizontally<span
            aria-hidden="true"
            class="select-none">”</span
          >
        </p><footer
          class="translate-y-2 whitespace-nowrap text-xs opacity-0 group-data-[active=true]:translate-y-0 group-data-[active=true]:opacity-100 motion-safe:transition motion-safe:delay-300 motion-safe:duration-[400ms] motion-safe:group-data-[active=false]:delay-0"
        >
          <span class="font-bold">Todd Berman</span>
          <span class="text-secondary">|</span>
          <!-- -->CTO, Attentive
        </footer>
      </blockquote></a
    >
  </div>
</div>

<style>
  #my-tab-graid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  .span2 {
    grid-column: 2 span;
  }
  .span1 {
    grid-column: 1 span;
  }
  .box {
    transition: width 0.3s ease; /* 添加过渡效果，调整时长和缓动函数按需 */
    margin: 1px;
  }
</style>

<script>
const boxWith = document.querySelector("#box2").offsetWidth;
  document.addEventListener("DOMContentLoaded", function () {
    const boxes = Array.from(document.querySelectorAll(".box"));

    function setBoxWidths(span2Index) {
      boxes.forEach((box, index) => {
        if (index === span2Index) {
          box.style.width = `${boxWith * 2}px`;
        } else {
          box.style.width = `${boxWith}px`;
        }
      });
    }

    boxes.forEach((box, index) => {
      box.addEventListener("mouseenter", () => {
        setBoxWidths(index);
      });
    });
  });


</script>